import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';
import MobileNavigation from '@/components/MobileNavigation';
import MobileFooter from '@/components/MobileFooter';
import styles from "./index.module.scss";
import image2 from './assets/image_2.png';
import image3 from './assets/image_3.png';

export default function GeneratedComponent() {
  const { t } = useTranslation();
  useEffect(
    () => {
      window.scrollTo(0, 0)
    },
    []
  );
  return (
    <div style={{ paddingTop: 62 }}>
      <MobileNavigation />
      <div className={styles.page}>
        <div className={styles.wrap}>
          <img src={image2} className={styles.image1} />
        </div>
        <div className={styles.wrap1}>
          <div className={styles.container}>
            <div className={styles.text}>
              <div className={styles.text__linebreak}>
                {t('Color Vision Test')}
              </div>
              <div>{t('辨色测试标题')}</div>
            </div>
            <div className={styles.content}>
              <div className={styles.main}>
                <div className={styles.section}>
                  <img
                    src={image3}
                    className={styles.image2}
                  />
                  <div className={styles.text1}>{t('扫描二维码开始测试')}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <MobileFooter />

    </div>

  );
}
